/* 富文本内容样式 - 基于blog-frontend的优秀实现 */

.rich-text-content {
  line-height: 1.8;
  color: #303133;
  font-size: 1.1rem;

  /* 标题样式 */
  h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 15px 0;
    color: #303133;
    font-weight: 600;
  }

  h1 {
    font-size: 2rem;
    border-bottom: 2px solid #ebeef5;
    padding-bottom: 10px;
  }

  h2 {
    font-size: 1.75rem;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 8px;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  h5 {
    font-size: 1.1rem;
  }

  h6 {
    font-size: 1rem;
  }

  /* 段落样式 */
  p {
    margin-bottom: 15px;
    text-align: justify;
  }

  /* 行内代码样式 */
  code {
    background: #f5f7fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #e96900;
    border: 1px solid #e1e4e8;
  }

  /* 普通代码块样式 */
  pre {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 15px 0;
    border: 1px solid #e1e4e8;

    code {
      background: transparent;
      padding: 0;
      border: none;
      color: #24292e;
    }
  }

  /* Quill 编辑器代码块样式 - 仿Mac风格 */
  .ql-code-block-container {
    background: #282c34;
    border: 1px solid #3e4451;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Mac风格顶部装饰 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 30px;
      background: linear-gradient(90deg, #ff5f56 0%, #ffbd2e 33%, #27ca3f 66%);
      border-radius: 8px 8px 0 0;
      margin: -1px -1px 0 -1px;
    }

    /* Mac风格圆点 */
    &::after {
      content: '';
      position: absolute;
      top: 8px;
      left: 15px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff5f56;
      box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27ca3f;
    }
  }

  .ql-code-block {
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
    color: #abb2bf;
    background: transparent;
    border: none;
    padding: 30px 0 0 0;
    font-family: inherit;
    font-size: 14px;
    display: block;
  }

  /* 代码块语法高亮样式 */
  .ql-code-block-container .ql-code-block {
    color: #abb2bf;
  }

  /* 不同语言的语法高亮 */
  .ql-code-block-container[data-language="javascript"] .ql-code-block,
  .ql-code-block-container[data-language="js"] .ql-code-block {
    color: #e06c75;
  }

  .ql-code-block-container[data-language="python"] .ql-code-block {
    color: #61afef;
  }

  .ql-code-block-container[data-language="java"] .ql-code-block {
    color: #e06c75;
  }

  .ql-code-block-container[data-language="css"] .ql-code-block {
    color: #c678dd;
  }

  .ql-code-block-container[data-language="html"] .ql-code-block {
    color: #d19a66;
  }

  .ql-code-block-container[data-language="sql"] .ql-code-block {
    color: #61afef;
  }

  .ql-code-block-container[data-language="yaml"] .ql-code-block,
  .ql-code-block-container[data-language="yml"] .ql-code-block {
    color: #98c379;
  }

  .ql-code-block-container[data-language="docker"] .ql-code-block,
  .ql-code-block-container[data-language="dockerfile"] .ql-code-block {
    color: #56b6c2;
  }

  /* 代码块行号效果 */
  .ql-code-block-container {
    counter-reset: line-number;
  }

  .ql-code-block {
    counter-increment: line-number;
    position: relative;
    padding-left: 50px;

    &::before {
      content: counter(line-number);
      position: absolute;
      left: -40px;
      top: 0;
      color: #5c6370;
      font-size: 12px;
      line-height: inherit;
      text-align: right;
      width: 30px;
      user-select: none;
    }
  }

  /* 列表样式 */
  ul, ol {
    margin: 15px 0;
    padding-left: 30px;

    li {
      margin-bottom: 8px;
      line-height: 1.6;
    }
  }

  ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
      }
    }
  }

  ol {
    list-style-type: decimal;

    ol {
      list-style-type: lower-alpha;

      ol {
        list-style-type: lower-roman;
      }
    }
  }

  /* 引用样式 */
  blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    background: #f8f9fa;
    border-left: 4px solid #409eff;
    border-radius: 0 4px 4px 0;
    color: #606266;
    font-style: italic;

    p {
      margin-bottom: 0;
    }
  }

  /* 表格样式 */
  table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;

    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;

      &:last-child {
        border-right: none;
      }
    }

    th {
      background: #f5f7fa;
      font-weight: 600;
      color: #303133;
    }

    tr {
      &:last-child {
        td {
          border-bottom: none;
        }
      }

      &:hover {
        background: #f5f7fa;
      }
    }
  }

  /* 分割线样式 */
  hr {
    margin: 30px 0;
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #ebeef5, transparent);
  }

  /* 图片样式 */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 15px 0;
  }

  /* 链接样式 */
  a {
    color: #409eff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      color: #66b1ff;
      border-bottom-color: #66b1ff;
    }
  }

  /* 强调样式 */
  strong, b {
    font-weight: 600;
    color: #303133;
  }

  em, i {
    font-style: italic;
    color: #606266;
  }

  /* 删除线 */
  del, s {
    text-decoration: line-through;
    color: #909399;
  }

  /* 下划线 */
  u {
    text-decoration: underline;
    text-decoration-color: #409eff;
  }

  /* 标记高亮 */
  mark {
    background: #fff3cd;
    color: #856404;
    padding: 2px 4px;
    border-radius: 2px;
  }
}

/* 兼容原有的ql-editor类 */
.ql-editor {
  @extend .rich-text-content;
}